<template>
  <div class="main wrap">
    <div>
      <MyLike />
      <MyFilm @add="add" :num="num" @finish="finish" />
    </div>
  </div>
</template>

<script>
import MyLike from "@/components/home/MyLike";
import MyFilm from "@/components/home/MyFilm";
import BScroll from "better-scroll";
var bs; //eslint-disable-line no-unused-vars
export default {
  data() {
    return {
      num: 1,
    };
  },
  components: {
    MyLike,
    MyFilm,
  },
  methods: {
    add() {
      bs = new BScroll(".wrap", {
        scrollX: false,
        scrollY: true,
        click: true,
        pullUpLoad: {
          threshold: 100,
        },
      });
      bs.on("pullingUp", () => {
        console.log(1);
        this.num++;
      });
    },
    finish() {
      bs.refresh();
      bs.finishPullUp();
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  background-color: #f5f5f5;
  overflow: hidden;
  position: absolute;
  top: 155px;
  right: 0;
  left: 0;
  bottom: 50px;
}
</style>
